import React from 'react';
import { ImageResponse } from '@vercel/og';
import { NextResponse } from 'next/server';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

export const runtime = 'edge';

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  try {
    // 从数据 API 获取行程信息
    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
    const response = await fetch(`${baseUrl}/api/trips/${params.id}/data`);
    
    if (!response.ok) {
      throw new Error('获取行程数据失败');
    }

    const trip = await response.json();

    return new ImageResponse(
      (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
            height: '100%',
            padding: '40px',
            backgroundColor: 'white',
            fontFamily: 'sans-serif',
          }}
        >
          <div
            style={{
              width: '100%',
              maxWidth: '800px',
            }}
          >
            <h1
              style={{
                fontSize: '48px',
                fontWeight: 'bold',
                color: '#1a365d',
                textAlign: 'center',
                marginBottom: '24px',
              }}
            >
              {trip.title}
            </h1>

            <div
              style={{
                fontSize: '24px',
                color: '#4a5568',
                textAlign: 'center',
                marginBottom: '32px',
              }}
            >
              {format(new Date(trip.startDate), 'yyyy年MM月dd日', { locale: zhCN })} - 
              {format(new Date(trip.endDate), 'yyyy年MM月dd日', { locale: zhCN })}
              <br />
              共 {trip.activities.length} 个活动
            </div>

            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '16px',
              }}
            >
              {trip.activities.map((activity: any, index: number) => (
                <div
                  key={activity.id}
                  style={{
                    padding: '20px',
                    backgroundColor: '#f7fafc',
                    borderRadius: '12px',
                  }}
                >
                  <div
                    style={{
                      fontSize: '24px',
                      fontWeight: 'bold',
                      color: '#2d3748',
                      marginBottom: '8px',
                    }}
                  >
                    {index + 1}. {activity.title}
                  </div>
                  <div
                    style={{
                      fontSize: '18px',
                      color: '#718096',
                      marginBottom: '8px',
                    }}
                  >
                    {format(new Date(activity.date), 'MM月dd日 HH:mm', { locale: zhCN })}
                  </div>
                  {activity.description && (
                    <div
                      style={{
                        fontSize: '16px',
                        color: '#4a5568',
                      }}
                    >
                      {activity.description}
                    </div>
                  )}
                </div>
              ))}
            </div>

            <div
              style={{
                marginTop: '32px',
                textAlign: 'center',
                fontSize: '14px',
                color: '#a0aec0',
              }}
            >
              由 Travel Planner 生成
            </div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 1600,
        debug: true,
      }
    );
  } catch (error) {
    console.error('Generate poster error:', error);
    return NextResponse.json(
      { error: '生成海报失败: ' + (error as Error).message },
      { status: 500 }
    );
  }
} 